<!--
// 
// ChineseGetter.vue
// 海石后台管理
// 
// 2024/12/10.
// 
-->
<template>
    <div class="ChineseGetter">
        <div class="database">
            <div class="header">
                <div class="icon">
                    <el-icon v-if="state.loadingState === 0">
                        <Search />
                    </el-icon>
                    <el-icon v-if="state.loadingState === 1" class="loading" color="orange">
                        <Loading />
                    </el-icon>
                    <el-icon v-if="state.loadingState === 2" color="green">
                        <CircleCheck />
                    </el-icon>
                    <el-icon v-if="state.loadingState === 3" color="red">
                        <CircleClose />
                    </el-icon>
                </div>
                <div class="message">
                    <span v-if="state.loadingState === 0">未查询</span>
                    <span v-if="state.loadingState === 1">正在查询</span>
                    <span v-if="state.loadingState === 2">查询完成 共 {{ state.dataBaseList.length + 1 }} 项</span>
                    <span v-if="state.loadingState === 3">查询失败</span>
                </div>
                <el-select v-model="state.progCode" filterable style="width: 160px">
                    <el-option v-for="item in state.programList" :key="item.id" :label="item.name" :value="item.code" />
                </el-select>
                <el-button plain type="primary" @click="loadAllLanguage">查询所有配置项</el-button>
            </div>
            <div class="list">
                <div v-for="(item, i) in state.dataBaseList" :key="item.id" class="cell">
                    <div class="num">{{ i + 1 }}.</div>
                    {{ item.zh }}
                </div>
            </div>
        </div>
        <div class="code-file">
            <el-input v-model="state.code" class="code" input-style="width: 100%;height: 100%" placeholder="文件代码" type="textarea"></el-input>
        </div>
        <div class="options">
            <el-input v-model="state.reg" :rows="4" class="reg" placeholder="正则表达式" type="textarea"></el-input>
            <div class="list">
                <div v-for="(item) in state.unList" :key="item.id" class="cell">
                    <div class="num">{{ item.id }}.</div>
                    <div class="text">
                        <el-icon v-if="item.addState === 1" class="loading" color="orange">
                            <Loading />
                        </el-icon>
                        <el-icon v-if="item.addState === 2" color="green">
                            <CircleCheck />
                        </el-icon>
                        <el-icon v-if="item.addState === 3" color="red">
                            <CircleClose />
                        </el-icon>
                        <span style="padding-left: 10px">{{ item.text }}</span>
                    </div>
                    <div class="remove">
                        <el-button icon="close" size="small" type="danger" @click="removeUnText(item.id)"></el-button>
                    </div>
                </div>
            </div>
            <div class="actions">
                <el-button plain type="primary" @click="format">识别</el-button>
                <el-button type="primary" @click="autoAdd">自动添加</el-button>
                <el-button type="danger" plain @click="removeSuccessed">清空成功项</el-button>
                <el-button type="danger" @click="removeAll">清空所有</el-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import {ref, reactive, computed, onMounted} from "vue";
import {useStore} from "vuex";
import {useRouter} from "vue-router";
import * as api from "./api.js"

const props = defineProps({});
const emits = defineEmits();

// 路由
const router = useRouter();
// store
const store = useStore();

/**
 * 未在数据库列表中的字符列表
 * @param str
 * @param i
 * @constructor
 */
const UnListModel = (str, i) => {
    return {
        id: i,
        text: str,
        // 0 未添加 1 添加中 2 已添加
        addState: 0,
    }
}

const state = reactive({
    // 0 未查询 1 正在查询 2 查询完成 3 查询失败
    loadingState: 0,
    // 程序编号
    progCode: null,
    // 数据库列表
    dataBaseList: [],
    // 未在数据库里的列表
    unList: [],
    // 代码
    code: null,
    // 正则
    reg: /return Failed\("(.*?)"\)/g
})

/**
 * 查询所有配置项
 */
function loadAllLanguage() {
    if (!state.progCode) return $message.warning("请选择程序")
    state.loadingState = 1;
    api.GetAllLanguageList({progCode: state.progCode}).then(res => {
        if (res.success) {
            state.loadingState = 2
            state.dataBaseList = res.data || []
        } else {
            state.loadingState = 3;
        }
    })

}

/**
 * 识别
 */
function format() {
    if (!state.dataBaseList || state.dataBaseList.length === 0) return $message.warning("请先查询所有配置项");
    if (state.code == null) return $message.warning("请填入文件代码");
    if (state.reg == null) return $message.warning("请填入正则表达式");
    // console.log(state.code);
    // console.log(state.reg);
    const regex = new RegExp(state.reg, "g");
    let results = [];
    let match;
    while ((match = regex.exec(`${state.code}`)) != null) {
        const text = match[1];
        const hasIndex = state.dataBaseList.findIndex(item => item.zh === text);
        if (hasIndex < 0) {
            results.push(text);
        }
    }
    results = [...new Set(results)]
    console.log(results);

    state.unList = results.map((item, i) => {
        return UnListModel(item, i)
    })
    if (state.unList.length === 0) {
        $message.warning("没有识别出待添加的中文字符配置项")
    }
}

/**
 * 自动添加
 */
async function autoAdd() {
    if (!state.unList || state.unList.length === 0) return $message.warning("没有待添加的中文字符配置项")
    if (!state.progCode) return $message.warning("请选择程序");
    const progId = state.programList.find(item => item.code === state.progCode)?.id
    for (let i = 0; i < state.unList.length; i++) {
        const zh = state.unList[i].text
        const body = {
            programId: progId,
            zh
        }
        state.unList[i].addState = 1
        const {success} = await api.AddProgramLanguage(body);
        if (success) {
            state.unList[i].addState = 2
        } else {
            state.unList[i].addState = 3
        }
        continue;
    }
    $message.success("添加完成")
}

/**
 * 清空成功项
 */
function removeSuccessed() {
    state.unList = state.unList.filter(item => item.addState !== 2)
}

/**
 * 清空所有
 */
function removeAll() {
    state.unList = [];
}

/**
 * 删除
 * @param id
 */
function removeUnText(id) {
    const list = state.unList;
    const i = list.findIndex(i => i.id === id);
    if (i > -1) {
        list.splice(i, 1);
        state.unList = list;
    }
}


onMounted(() => {
    api.GetProgramList({}).then(res => {
        state.programList = res.data || [];
    })
    console.log("ChineseGetter onMounted");
})
</script>

<style lang="scss" scoped>
.ChineseGetter {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;

    .database {
        width: 530px;
        height: 100vh;
        border: 1px solid #ccc;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;

        .header {
            width: 100%;
            height: 40px;
            border-bottom: 1px solid #ccc;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            box-sizing: border-box;

            .icon {
                margin-right: 10px;

                .loading {
                    animation: loading 1s linear infinite;
                }
            }

            .message {
                flex: 1;
                padding-right: 10px;
            }
        }

        .list {
            flex: 1;
            width: 100%;
            overflow: auto;

            .cell {
                width: 100%;
                padding: 6px 10px;
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: flex-start;

                .num {
                    width: 60px;
                }
            }
        }
    }

    .code-file {
        flex: 1;
        height: 100vh;
        box-sizing: border-box;
        padding: 10px;

        .code {
            width: 100%;
            height: 100%;
        }
    }

    .options {
        width: 400px;
        height: 100vh;
        box-sizing: border-box;
        padding: 10px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;

        .reg {
            width: 100%;
        }

        .list {
            flex: 1;
            width: 100%;
            overflow: auto;

            .cell {
                width: 100%;
                padding: 6px 10px;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                box-sizing: border-box;

                .num {
                    width: 60px;
                }

                .text {
                    flex: 1;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;

                    .loading {
                        animation: loading 1s linear infinite;
                    }
                }

                .remove {
                    width: 40px;
                }
            }
        }

        .actions {
            padding-top: 10px;
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
        }
    }
}

@keyframes loading {
    0% {
        transform: rotateZ(0deg);
    }
    100% {
        transform: rotateZ(360deg);
    }

}
</style>